import { adminMenus,userMenuList } from '@/api/system/menu';
import { constantRouterIcon } from './icons';
import { RouteRecordRaw } from 'vue-router';
import { Layout, ParentLayout } from '@/router/constant';
import type { AppRouteRecordRaw } from '@/router/types';
import { renderIcon } from '@/utils/index';


const Iframe = () => import('@/views/iframe/index.vue');
const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();

LayoutMap.set('LAYOUT', Layout);
LayoutMap.set('IFRAME', Iframe);




/**
 * 格式化 后端 结构信息并递归生成层级路由表
 * @param routerMap
 * @param parent
 * @returns {*}
//  */
export const generateRoutes = (routerMap, parent?): any[] => {
  return routerMap.map((item) => {
    const currentRoute: any = {
      // 路由地址 动态拼接生成如 /dashboard/workplace
      // ${(parent && parent.path) ?? ''}/
      path: `${item.path}`,
      // 路由名称，建议唯一
      name: item.name ?? '',
      // 该路由对应页面的 组件
      component: item.component,
      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
      meta: {
        ...item.meta,
        label: item.meta.title,
        // icon: item.meta.icon ? renderIcon(item.meta.icon) : null,
        icon: constantRouterIcon[item.meta.icon] || null,
        permissions: item.meta.permissions || null,
      },
    };

    // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
    currentRoute.path = currentRoute.path.replace('//', '/');
    // 重定向 TODO 
    item.redirect && (currentRoute.redirect = item.redirect);
    // 是否有子菜单，并递归处理
    if (item.children && item.children.length > 0) {
      //如果未定义 redirect 默认第一个子路由为 redirect
      !item.redirect && (currentRoute.redirect = `${item.children[0].path}`);
      // Recursion
      currentRoute.children = generateRoutes(item.children, currentRoute);
    }
    return currentRoute;
  });
};


// export const generateRoutes = (routerMap, parent?): any[] => {
//   // 
//   // let allRouterMap: any[] = [];
//   // allRouterMap = routerMap.front.concat(routerMap.back);
//   let allRouterMap: any[] = [];
  
//   // 兼容不同格式的输入
//   if (Array.isArray(routerMap)) {
//     // 如果 routerMap 本身就是数组
//     allRouterMap = routerMap;
//   } else if (routerMap && typeof routerMap === 'object') {
//     // 如果 routerMap 包含 front 和 back 属性
//     if (Array.isArray(routerMap.front) && Array.isArray(routerMap.back)) {
//       allRouterMap = routerMap.front.concat(routerMap.back);
//     } else {
//       // 如果 routerMap 是普通对象，尝试直接使用
//       allRouterMap = [routerMap];
//     }
//   } else {
//     // 其他情况初始化为空数组
//     allRouterMap = [];
//   }

//   return allRouterMap.map((item) => {
//     // 处理后端返回的字段名与前端路由结构的映射
//     const routeItem = {
//       ...item,
//       // 将 url 映射为 path
//       path: item.url || item.path || '',
//       // 将 child 映射为 children（递归处理）
//       children: item.child ? item.child.map(child => ({
//         ...child,
//         url: child.url || child.path || '',
//         child: child.child // 保持 child 结构以供递归处理
//       })) : (item.children || undefined)
//     };

//     const currentRoute: any = {
//       // 路由地址 动态拼接生成如 /dashboard/workplace
//       path: `${(parent && parent.path) ?? ''}/${routeItem.path}`.replace('//', '/'),
//       // 路由名称，建议唯一
//       name: routeItem.name ?? '',
//       // 该路由对应页面的 组件
//       component: routeItem.component,
//       // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
//       meta: {
//         ...routeItem.meta,
//         title: routeItem.name,
//         label: routeItem.name,
//         icon: constantRouterIcon[routeItem.icon] || null,
//         permissions: routeItem.permission || null,
//       },
//     };

//     // 重定向
//     routeItem.redirect && (currentRoute.redirect = routeItem.redirect);
    
//     // 是否有子菜单，并递归处理
//     if (routeItem.children && routeItem.children.length > 0) {
//       // 如果未定义 redirect 默认第一个子路由为 redirect
//       !routeItem.redirect && (currentRoute.redirect = `${routeItem.path}/${routeItem.children[0].url || routeItem.children[0].path}`);
//       // Recursion
//       currentRoute.children = generateRoutes(routeItem.children, currentRoute);
//     }
    
//     return currentRoute;
//   });

//   // return allRouterMap.map((item) => {
//   //   const currentRoute: any = {
//   //     // 路由地址 动态拼接生成如 /dashboard/workplace
//   //     path: `${(parent && parent.path) ?? ''}/${item.path}`,
//   //     // 路由名称，建议唯一
//   //     name: item.name ?? '',
//   //     // 该路由对应页面的 组件
//   //     component: item.component,
//   //     // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
//   //     meta: {
//   //       ...item.meta,
//   //       label: item.meta.title,
//   //       icon: constantRouterIcon[item.meta.icon] || null,
//   //       permissions: item.meta.permissions || null,
//   //     },
//   //   };

//   //   // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
//   //   currentRoute.path = currentRoute.path.replace('//', '/');
//   //   // 重定向
//   //   item.redirect && (currentRoute.redirect = item.redirect);
//   //   // 是否有子菜单，并递归处理
//   //   if (item.children && item.children.length > 0) {
//   //     //如果未定义 redirect 默认第一个子路由为 redirect
//   //     !item.redirect && (currentRoute.redirect = `${item.path}/${item.children[0].path}`);
//   //     // Recursion
//   //     currentRoute.children = generateRoutes(item.children, currentRoute);
//   //   }
//   //   return currentRoute;
//   // });
// };

/**
 * 动态生成菜单
 * @returns {Promise<Router>}
 */
export const generateDynamicRoutes = async (): Promise<RouteRecordRaw[]> => {
  const result = await userMenuList();
  // await adminMenus();
  
  // TODO 预处理数据
  const processRouters = processResult(result);
  
  const router = generateRoutes(processRouters);
  console.log("生成菜单:",router);
  asyncImportRoute(router);
  return router;
};

/**
 * 处理后端返回的原始数据
 * @param data 后端返回的数据，包含front和back字段
 * @returns 处理后的路由数据
 */
export const processResult =(data: any): any[] =>{
  const result: any[] = [];
  const allRoutes = data.front.concat(data.back);
  
  if (allRoutes && allRoutes.length) {
    allRoutes.forEach(item => {
      const { url, component, name, icon } = item;
      const { child } = item;
      if (component) {
        const hasChildren = !!(child && child.length > 0);
        const route: any = {
          path: url,
          name: component,
          component: "LAYOUT",
          meta: {
            icon: icon,
            title: name,
            permissions: hasChildren ? [] : [component],
            isRoot: !hasChildren
          },
          children: []
        };
        // 首页处理
        if (route.meta.isRoot) {
          const childRoute = {
            path: url,
            name: `${component}_index`,
            meta: {
              icon: icon,
              title: name,
              activeMenu: `${component}_index`,
              affix: component === "homepage",
              permissions: [component]
            },
            component: url
          };
          route.activeMenu = childRoute.meta.activeMenu;
          route.children = [childRoute];
        }
        
        if (hasChildren) {
          route.children = processChildren(child);
        }
        
        result.push(route);
      }
    });
  }
  console.log("获取菜单:",result);
  return result;
}

/**
 * 递归处理子路由
 * @param childrenData 子路由数据
 * @returns 处理后的子路由数组
 */
export const processChildren = (childrenData: any[]): any[] => {
  const result: any[] = [];
  
  if (childrenData && childrenData.length) {
    childrenData.forEach(item => {
      const { url, component, name } = item;
      const { child } = item;
      
      if (component) {
        const route: any = {
          path: url,
          name: component,
          component: url,
          meta: {
            title: name,
            permissions: [component]
          },
          children: []
        };
        
        if (child && child.length) {
          route.children = processChildren(child);
        }
        
        result.push(route);
      }
    });
  }
  
  return result;
}

/**
 * 生成路由树结构
 * @param routes 处理后的路由数据
 * @param parent 父级路由
 * @returns Vue Router格式的路由配置
 */
export const generateRouteTree = (routes: any[], parent?: any): any[] =>{
  return routes.map((item) => {
    // 处理元数据
    const meta = {
      ...item.meta,
      label: item.meta.title,
      icon: constantRouterIcon[item.meta.icon] || null,
      permissions: item.meta.permissions || null,
    };
    
    // 如果有activeMenu，则添加到meta中
    if (item.activeMenu) {
      meta.activeMenu = item.activeMenu;
    }
    
    // 如果有affix，则添加到meta中
    if (item.meta?.affix) {
      meta.affix = item.meta.affix;
    }
    
    const currentRoute: any = {
      path: `${(parent && parent.path) ?? ''}/${item.path}`.replace('//', '/'),
      name: item.name ?? '',
      component: item.component,
      meta: meta,
    };

    // 重定向处理
    if (item.redirect) {
      currentRoute.redirect = item.redirect;
    } else if (item.children && item.children.length > 0) {
      // 如果未定义 redirect，默认第一个子路由为 redirect
      // currentRoute.redirect = `${item.path}/${item.children[0].path}`;
      // TODO 
      currentRoute.redirect = `${item.children[0].path}`;
    }

    // 递归处理子路由
    if (item.children && item.children.length > 0) {
      currentRoute.children = generateRouteTree(item.children, currentRoute);
    }
    
    return currentRoute;
  });
}


/**
 * 查找views中对应的组件文件
 * */
let viewsModules: Record<string, () => Promise<Recordable>>;
export const asyncImportRoute = (routes: AppRouteRecordRaw[] | undefined): void => {
  viewsModules = viewsModules || import.meta.glob('../views/**/*.{vue,tsx}');
  if (!routes) return;
  routes.forEach((item) => {
    if (!item.component && item.meta?.frameSrc) {
      item.component = 'IFRAME';
    }
    const { component, name } = item;
    const { children } = item;
    if (component) {
      const layoutFound = LayoutMap.get(component as string);
      if (layoutFound) {
        item.component = layoutFound;
      } else {
        item.component = dynamicImport(viewsModules, component as string);
      }
    } else if (name) {
      item.component = ParentLayout;
    }
    children && asyncImportRoute(children);
  });
};

/**
 * 动态导入
 * */
export const dynamicImport = (
  viewsModules: Record<string, () => Promise<Recordable>>,
  component: string
) => {
  const keys = Object.keys(viewsModules);
  const matchKeys = keys.filter((key) => {
    let k = key.replace('../views', '');
    const lastIndex = k.lastIndexOf('.');
    k = k.substring(0, lastIndex);
    return k === component;
  });
  if (matchKeys?.length === 1) {
    const matchKey = matchKeys[0];
    return viewsModules[matchKey];
  }
  if (matchKeys?.length > 1) {
    console.warn(
      'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure'
    );
    return;
  }
};
